// 问答题
import React, { useState } from "react";

import {
  StyleSheet,
  ScrollView,
  Text,
  View,
  TouchableOpacity,
  TextInput,
} from "react-native";
import SetSkip from "../SetSkip";

let submitQues1, Question1;

const EssayQues = ({ question, setIsSkip }) => {
  // console.log("要编辑的题目---", question);
  const IsNeed = ["是", "否"];
  const [needAnswer, setNeedAnswer] = useState(question.needAnswer ? 0 : 1);
  const [title, setTitle] = useState(question.title);
  const [skipType, setSkipType] = useState(question.skipType);
  const [relation, setRelation] = useState(question.relation);
  const [skipDetail, setSkipDetail] = useState(question.skipDetail);
  const [isSetting, setIsSetting] = useState(false); // 是否正在设置跳过

  submitQues1 = async () => {
    // console.log(t_options);
    Question1 = {
      type: question.type, // 1：问答题
      needAnswer: needAnswer ? 0 : 1,
      title: title,
      visible: true,
      answer: "",
      skipType: skipType,
      relation: relation,
      skipDetail: skipDetail,
    };
    // console.log("问答题", Question1);
  };
  const handleSkip = () => {
    setIsSetting(false);
    setIsSkip(false);
    // console.log("skipType---", skipType);
    // console.log("skipDetail---", skipDetail);
  };

  return (
    <View style={styles.borderView}>
      {!isSetting ? (
        <View>
          <View style={styles.group}>
            <View style={{ flexDirection: "row", marginBottom: 10 }}>
              <Text style={{ color: "red" }}>* </Text>
              <Text style={{ color: "#aaa" }}>标题</Text>
            </View>
            <TextInput
              style={styles.inputBox}
              multiline={true}
              maxLength={500}
              value={title}
              placeholder="请输入标题"
              onChangeText={(text) => {
                setTitle(text);
              }}
            ></TextInput>
            {question.type == 4 ? (
              <Text
                style={{
                  fontSize: 13,
                  color: "#999",
                  marginLeft: 5,
                  marginTop: 7,
                }}
              >
                {"规则：填空处请以“**”代替 (如：**省**市)"}
              </Text>
            ) : null}
          </View>
          <View style={{ height: 10, backgroundColor: "#eee" }}></View>
          <View style={styles.group}>
            <View style={{ flexDirection: "row", marginBottom: 10 }}>
              <Text style={{ color: "#aaa" }}>设置</Text>
            </View>
            <View>
              <View
                style={[
                  styles.optionView,
                  { justifyContent: "space-between", paddingBottom: 10 },
                ]}
              >
                <View style={{ marginLeft: 5 }}>
                  <Text>是否必答题</Text>
                </View>
                <View
                  style={{
                    flexDirection: "row",
                    flexWrap: "wrap",
                  }}
                >
                  {IsNeed.map((tag, index) => {
                    return (
                      <TouchableOpacity
                        key={index}
                        onPress={() => {
                          setNeedAnswer(index);
                        }}
                      >
                        <View
                          style={
                            index == needAnswer
                              ? styles.optionsSelected
                              : styles.optionsView
                          }
                        >
                          <Text
                            style={
                              index == needAnswer
                                ? styles.textSelected
                                : styles.optionsText
                            }
                          >
                            {tag}
                          </Text>
                        </View>
                      </TouchableOpacity>
                    );
                  })}
                </View>
              </View>
            </View>
            <TouchableOpacity
              onPress={() => {
                setIsSetting(true);
                setIsSkip(true);
                console.log("处理跳过---", isSetting);
              }}
            >
              <View
                style={[
                  styles.optionView,
                  {
                    justifyContent: "space-between",
                    paddingBottom: 15,
                    marginTop: 5,
                  },
                ]}
              >
                <View style={{ marginLeft: 5 }}>
                  <Text>跳题设置</Text>
                </View>
                <View
                  style={{
                    flexDirection: "row",
                    flexWrap: "wrap",
                  }}
                >
                  <Text style={{ color: "#bbb" }}>
                    {skipType == 0 ? "未设置" : "已设置"}
                  </Text>
                  <Text
                    style={{ color: "#bbb", marginRight: 13, marginLeft: 3 }}
                  >
                    {">"}
                  </Text>
                </View>
              </View>
            </TouchableOpacity>
          </View>
        </View>
      ) : (
        <View style={{ height: "100%" }}>
          <SetSkip
            quesType={question.type}
            options={[]}
            skipType={skipType}
            relation={relation}
            skipDetail={skipDetail}
            setRelation={(relation) => {
              setRelation(relation);
            }}
            setSkipDetail={(detail) => {
              setSkipDetail(detail);
            }}
            setSkipType={(index) => {
              setSkipType(index);
            }}
            handleSkip={() => {
              handleSkip();
            }}
          ></SetSkip>
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  borderView: {
    // padding: 5,
    // justifyContent: "center",
    // backgroundColor: "#eee",
    // height: "100%",
  },
  group: {
    padding: 15,
    backgroundColor: "#fff",
    paddingLeft: "5%",
    paddingRight: "5%",
  },
  inputBox: {
    borderColor: "#ddd",
    borderWidth: 1,
    // height: 100,
    borderRadius: 3,
    padding: 10,
    paddingTop: 15,
    paddingBottom: 20,
  },
  optionView: {
    flexDirection: "row",
    marginBottom: 12,
    alignItems: "center",
    borderBottomColor: "#ddd",
    borderBottomWidth: 1,
  },
  optionsView: {
    borderRadius: 14,
    marginTop: 5,
    padding: 4,
    paddingLeft: 10,
    paddingRight: 10,
    // backgroundColor: "#51bfe5",
    backgroundColor: "#fff",
    marginRight: 10,
    elevation: 4, //设置阴影角度，通过这个设置有无阴影
    shadowOffset: {
      // 设置阴影偏移量
      width: 0,
      height: 0,
    },
    shadowRadius: 4, // 设置阴影模糊半径
    shadowOpacity: 0.5, // 设置阴影的不透明度
    shadowColor: "gray", // 设置阴影色
  },
  optionsSelected: {
    borderRadius: 14,
    marginTop: 5,
    padding: 4,
    paddingLeft: 10,
    paddingRight: 10,
    marginRight: 10,
    backgroundColor: "#41C3EE",
  },
  textSelected: {
    color: "#fff",
  },
  optionsText: {
    color: "#000",
  },
});

export default EssayQues;
export { submitQues1, Question1 };
